
<template>
  <div id="oder-list" class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form :inline="true" ref="ruleForm">
        <el-form-item>
          <el-button
            icon="el-icon-circle-plus-outline"
            type="button"
            class="el-button el-button--primary"
            @click="
              dialogFormVisible = true;
              diaTitle = '添加资源分类';
              isCreate = 'true';
            "
          >
            资源分类添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      element-loading-text="给我一点时间"
      style="width: 100%"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="name" label="资源分类名称"></el-table-column>

      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column prop="operate" align="center" label="操作" width="400">
        <template slot-scope="scope">
          <div class="fx" style="display: flex">
            <el-button
              @click="editResourceCategory(scope.row)"
              type="button"
             icon="el-icon-edit"
              class="el-button el-button--primary"
              >修改</el-button
            >
            <el-button
              type="button"
              icon="el-icon-delete"
              class="el-button el-button--danger"
              @click="deleteResourceCategory(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- //新增 修改 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
      width="40%"
    >
      <!-- <el-form :model="createForm" :rules="rules" ref="form"> -->
      <el-form :model="createForm" :rules="rules" ref="createForm">
        <el-form-item
          prop="name"
          label="资源分类名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="createForm.name" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item
          prop="sort"
          label="资源分类排序"
          :label-width="formLabelWidth"
        >
          <el-input v-model="createForm.sort" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          v-if="isCreate == 'true'"
          type="primary"
          @click="submitForm('createForm')"
          >创建</el-button
        >
        <el-button 
        icon="el-icon-edit"
        v-else type="primary" @click="edit('createForm')"
          >修改</el-button
        >
      </div>
    </el-dialog>
    <!-- 分页 -->
    <!-- <div class="pagination-container">
      <el-pagination
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40, 100, 300, 500]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div> -->
  </div>
</template>

<script>
import {
  allResourceCategory,
  createResourceCategory,
  editResourceCategory,
  deleteResourceCategory,
} from "@/api/resourceCategory";
export default {
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入资源分类名称", trigger: "change" },
        ],
      },
      loading: false,
      pageNum: 1,
      pageSize: 20,
      total: 0,
      editID: "",
      isCreate: "",
      diaTitle: "",
      dialogFormVisible: false,
      formLabelWidth: "140px",
      tableData: [],
      createForm: {
        name: "", //资源分类名称
        sort: "", //资源分类排序
      },
    };
  },
  methods: {
    //   删除资源
    deleteResourceCategory(id) {
      // console.log(id);
      this.$confirm("确定删除资源分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteResourceCategory(id);
          if (res.code == 1) {
            this.$message.success("删除资源分类成功");
            this.getAllResourceCategory();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    sizeChange(val) {
      this.pageSize = val;
    },
    currentChange(val) {
      this.pageNum = val;
    },

    // 资源修改提交
    edit(createForm) {
      
      this.$refs[createForm].validate(  async(valid) => {
        //开启校验
        if (valid) {
          // 如果校验通过，请求接口，允许提交表单
          let res = await editResourceCategory(this.editID, this.createForm);
          if (res.code == 1) {
            this.$message.success("资源分类修改成功");
            this.getAllResourceCategory();
            this.dialogFormVisible = false;
            this.createForm = {
              name: "", //资源分类名称
              sort: "", //资源分类排序
            };
          } else {
            this.$message.error("资源分类修改失败");
            this.dialogFormVisible = false;
            this.createForm = {
              name: "", //资源分类名称
              sort: "", //资源分类排序
            };
          }
        } else {
          //校验不通过
          return false;
        }
      });
    },
    // 对话框关闭
    closeDialog() {
            if (this.$refs.createForm) {
        this.$refs.createForm.resetFields();
      }
      this.isCreate = "";
      // this.diaTitle="";
      this.createForm = {
        name: "", //资源分类名称
        sort: "", //资源分类排序
      };
    },
    // 修改资源分类
    editResourceCategory(row) {
      this.diaTitle = "资源分类修改";
      this.createForm = {
        name: row.name, //资源分类名称
        sort: row.sort, //资源分类排序
        id: row.id, //资源分类ID
      };
      this.editID = row.id;
      this.dialogFormVisible = true;
    },

    // 获取所有资源分类
    async getAllResourceCategory() {
      this.loading = true;
      let res = await allResourceCategory();
      // console.log("资源分类", res.data);
      if (res.code == 1) {
        this.tableData = res.data;
      }
      this.loading = false;
    },

    // 添加资源分类
    async createResourceCategory() {
      const res = await createResourceCategory(this.createForm);
      // console.log("添加", res);
      if (res.code == 1) {
        this.$message.success("资源分类创建成功");
        this.getAllResourceCategory();
        this.dialogFormVisible = false;
        this.createForm = {
          name: "", //资源分类名称
          sort: "", //资源分类排序
        };
      } else {
        this.$message.error("资源分类创建失败");
        this.dialogFormVisible = false;
        this.createForm = {
          name: "", //资源分类名称
          sort: "", //资源分类排序
        };
      }
    },
    // 创建提交
    submitForm(createForm) {
      this.$refs[createForm].validate((valid) => {
        //开启校验
        if (valid) {
          // 如果校验通过，请求接口，允许提交表单
          this.createResourceCategory();
        } else {
          //校验不通过
          return false;
        }
      });
    },
  },
  computed: {},
  mounted() {
    this.getAllResourceCategory();
  },
  created() {},
};
</script>

<style lang="scss" scoped>
/deep/ .el-tree-node,
/deep/ .custom-tree-node {
  margin-bottom: 10px;
}
label {
  font-weight: 700;
}
/deep/ .custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
</style>
